<template>
  <!-- flex不定义具体宽高，用padding撑开；size则使用固定宽高 -->
  <div :class="[flexType == 'flex' ? '' : size, 'boxall']" v-if="visible">
    <div class="tit01">{{ title }}</div>
    <transition name="fade">
      <div class="box-container">
        <div :class="[flexType == 'flex' ? 'padding-flex' : 'content',content2]">
          <slot></slot>
        </div>
        <div class="footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </transition>
    <div class="boxfoot"></div>
  </div>
</template>
<script>
export default {
  name: "",
  props: {
    flexType: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "默认标题",
    },
    size: {
      type: String,
      default: "small",
    },
    visible: {
      type: Boolean,
      default: false,
    },
    content2: {
      type: String,
      default: '',
    },
  },
  data() {
    return {};
  },
  watch: {},
  methods: {},
};
</script>
<style lang="less" scoped>
.fontSize (@px, @attr: font-size) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}
.width (@px, @attr: width) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.height (@px, @attr: height) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.minHeight (@px, @attr: min-height) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.maxHeight (@px, @attr: max-height) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.lineHeight (@px, @attr: line-height) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.marginTop (@px, @attr: margin-top) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.marginBottom (@px, @attr: margin-bottom) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.marginLeft (@px, @attr: margin-left) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.marginRight (@px, @attr: margin-right) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.paddingLeft (@px, @attr: padding-left) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.tit01 {
  background: linear-gradient(
    to right,
    rgba(48, 82, 174, 0),
    rgba(48, 82, 174, 1),
    rgba(48, 82, 174, 0)
  );
  text-align: center;
  color: #fff;
  .fontSize(20);
  // .height(50);
  // .lineHeight(50);
  height: 4.6vh;
  line-height: 4.6vh;
}

.box-container {
  height: calc(100% - 4.6vh);
  display: flex;
  flex-direction: column;
}

.content {
  .marginTop(20);
  .fontSize(16);
  // height: calc(100% - 4.6vh);
  height: calc(100% - 6.6vh);
}
.content2{
    display: flex;
  flex-direction: column;
  justify-content: center;
}

.padding-flex {
  padding: 30px 16px;
  .fontSize(16);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.footer {
  .fontSize(16);
  height: 4.6vh;
  width: 100%;
}

.small-0 {
  .width(600);
  .height(300);
}

.small-1 {
  .width(600);
  .height(400);
}

.small-2 {
  .width(700);
  .height(500);
}

.small-3 {
  .width(800);
  .height(600);
}

.middle-1 {
  .width(900);
  .height(700);
}

.middle-2 {
  .width(1000);
  .height(750);
}

.midium-3 {
  .width(1100);
  .height(900);
}

.large-1 {
  .width(1200);
  height: 80vh;
}

.large-12 {
  .width(900);
  height: 80vh;
}

.large-2 {
  .width(1300);
  height: 85vh;
}

.large-3 {
  .width(1400);
  height: 90vh;
}

.large-4 {
  .width(1500);
  height: 95vh;
}

.large-5 {
  .width(1600);
  height: 95vh;
}

.large-6 {
  .width(1700);
  height: 95vh;
}

.boxall {
  border: 1px solid rgba(25, 186, 139, 0.17);
  position: relative;
  z-index: 10;
  box-sizing: border-box;
  padding: 10px;
}
.boxall:before,
.boxall:after {
  position: absolute;
  width: 0.6rem;
  height: 0.6rem;
  content: "";
  border-top: 2px solid #02a6b5;
  top: 0;
}
.boxall:before,
.boxfoot:before {
  border-left: 2px solid #02a6b5;
  left: 0;
}
.boxall:after,
.boxfoot:after {
  border-right: 2px solid #02a6b5;
  right: 0;
}
.boxfoot {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 10px; /* 调整高度，避免覆盖内容 */
  left: 0;
  z-index: -1;
}
.boxfoot:before,
.boxfoot:after {
  position: absolute;
  width: 0.6rem;
  height: 0.6rem;
  content: "";
  border-bottom: 2px solid #02a6b5;
  bottom: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
